<div style="display: flex; flex-direction: column; height: 100%;">
    <div class="layui-panel"
        style="flex: 1;padding-top:10px;padding-bottom:10px; padding-left:20px; padding-right:20px;overflow-y: auto;">
        <div class="layui-panel-title">
            <h3>结算方案</h3>
        </div>
        <div class="layui-panel-body">
            <!-- 文件上传区域 -->
            <div class="layui-upload">
                <div class="layui-upload-list">
                    <table class="layui-table">
                        <colgroup>
                            <col width="40"> <!-- 序号 -->
                            <col style="min-width: 100px;">
                            <col width="150">
                            <col width="100">
                            <col width="100">
                        </colgroup>
                        <thead>
                            <tr>
                                <th style="text-align: center;">No.</th>
                                <th style="text-align: center;">文件名</th>
                                <th style="text-align: center;">大小</th>
                                <th style="text-align: center;">上传状态</th>
                                <th style="text-align: center;">操作</th>
                            </tr>
                        </thead>
                        <tbody id="filesList"></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <!-- 提交按钮 -->
    <div class="layui-btn-container" style="float: left;margin-top: 10px;">
        <button type="button" class="layui-btn layui-btn-radius" id="btnSelect">选择方案</button>
        <button type="button" class="layui-btn layui-btn-radius" id="btnImport">开始导入</button>
        <button type="reset" class="layui-btn layui-btn-radius" id="btnReset">重置</button>
    </div>
</div>
<script>
layui.use(['upload', 'jquery'], function () {
    var upload = layui.upload;
    var $ = layui.$;

    // 初始化上传组件
    var uploadListIns = upload.render({
        elem: '#btnSelect',
        elemList: $('#filesList'),
        url: API_CONFIG.ENDPOINTS.IMPORT_PROJECT,
        accept: 'file',
        exts: 'xlsx',
        multiple: true,
        unified: true,
        number: 100,
        auto: false,
        bindAction: '#btnImport',
        choose: function (obj) {
            var that = this;
            // 使用新的文件数组，不要复用旧的文件队列
            var files = obj.pushFile();
            this.files = files; // 更新文件队列
            
            obj.preview(function (index, file, result) {
                var rowCount = that.elemList.find('tr').length;
                var newIndex = rowCount + 1;
                
                var tr = $(`
                    <tr id="upload-${index}">
                        <td>${newIndex}</td>
                        <td class="file-name">${file.name}</td>
                        <td>${(file.size / 1024).toFixed(1)}KB</td>
                        <td class="file-status">待上传</td>
                        <td>
                            <button class="layui-btn layui-btn-xs file-delete" data-index="${index}">删除</button>
                        </td>
                    </tr>
                `);
                
                // 删除按钮点击事件
                tr.find('.file-delete').on('click', function () {
                    var fileIndex = $(this).data('index');
                    
                    // 1. 从文件队列中删除（安全的方式）
                    if (that.files && that.files[fileIndex]) {
                        // 使用 splice 或 delete 删除
                        delete that.files[fileIndex];
                    }
                    
                    // 2. 从界面删除行
                    tr.remove();
                    
                    // 3. 重新计算序号
                    $('#filesList tr').each(function (i) {
                        $(this).find('td:first').text(i + 1);
                    });
                    
                    // 4. 清空 file input（重要）
                    var fileInput = $('#btnSelect').next('input[type="file"]')[0];
                    if (fileInput) {
                        fileInput.value = '';
                    }
                    
                    layer.msg('文件已删除', { icon: 1, time: 1000 });
                });
                
                that.elemList.append(tr);
            });
        },
        before: function () {
            // 上传前检查是否有有效的文件
            var hasValidFiles = false;
            if (this.files) {
                for (var key in this.files) {
                    if (this.files[key] && this.files[key] instanceof File) {
                        hasValidFiles = true;
                        break;
                    }
                }
            }
            
            if (!hasValidFiles) {
                layer.msg('请先选择文件', { icon: 2 });
                return false; // 阻止上传
            }
            
            layer.msg('正在批量上传并处理文件...', { icon: 16, time: 0 });
            this.data = {
                designType: API_CONFIG.DESIGNTYPE.Settlement,
            };
            return true;
        },
        done: function (res, index, upload) {
            console.log('服务器响应:', res);
            
            if (res.code === 0) {
                var results = res.data || [];
                var successCount = res.count || 0;
                
                $('#filesList tr').each(function () {
                    var tr = $(this);
                    var fileName = tr.find('.file-name').text();
                    var fileResult = findFileResult(results, fileName);
                    
                    if (fileResult && fileResult.is_success) {
                        tr.find('.file-status').html('<span style="color:green">' + (fileResult.message || '导入成功') + '</span>');
                    } else {
                        var errorMsg = fileResult ? fileResult.message : '处理失败';
                        tr.find('.file-status').html('<span style="color:red">' + errorMsg + '</span>');
                    }
                });
                
                layer.msg(`批量导入完成（成功: ${successCount} / 总数: ${results.length}）`, { icon: 1 });
            } else {
                $('#filesList .file-status').html('<span style="color:red">' + (res.msg || '导入失败') + '</span>');
                layer.msg('导入失败: ' + (res.msg || '未知错误'), { icon: 2 });
            }
        },
        allDone: function (obj) {
            layer.closeAll();
            // console.log('上传统计:', obj);
            
            // 延迟清理
            setTimeout(function () {
                // 只清理成功的文件行，不重置文件队列
                $('#filesList tr').each(function () {
                    var tr = $(this);
                    var statusText = tr.find('.file-status').text();
                    if (statusText.includes('成功')) {
                        tr.remove();
                    }
                });
                
                // 清空 file input，但保留文件队列
                $('#btnSelect').next('input[type="file"]').val('');
            }, 5000);
        },
        error: function (index, upload) {
            $('#upload-' + index + ' .file-status').html('<span style="color:red">上传失败</span>');
        }
    });

    // 辅助函数
    function findFileResult(results, fileName) {
        if (!results || !Array.isArray(results)) return null;
        for (var i = 0; i < results.length; i++) {
            if (results[i].file_name === fileName) {
                return results[i];
            }
        }
        return null;
    }

    // 重置按钮 - 完全重置
    $('#btnReset').on('click', function (e) {
        e.preventDefault();
        
        // 1. 清空文件列表
        $('#filesList').empty();
        
        // 2. 重置上传组件状态
        uploadListIns.config.files = [];
        
        // 3. 清空input file
        $('#btnSelect').next('input[type="file"]').val('');
        
        // 4. 显示提示
        layer.msg('已重置所有内容', { icon: 1, time: 1500 });
    });

    // 开始导入按钮检查
    $('#btnImport').on('click', function() {
        var hasValidFiles = false;
        if (uploadListIns.config.files) {
            for (var key in uploadListIns.config.files) {
                if (uploadListIns.config.files[key] && uploadListIns.config.files[key] instanceof File) {
                    hasValidFiles = true;
                    break;
                }
            }
        }
        
        if (!hasValidFiles) {
            layer.msg('请先选择要导入的文件', { icon: 2 });
            return false;
        }
    });
});
</script>